<template>
  <div class="addBrand-container">
    <div class="container">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px">
        <el-form-item label="题干" prop="description">
          <el-input v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="选型A" prop="optiona">
          <el-input v-model="ruleForm.optiona"></el-input>
        </el-form-item>
        <el-form-item label="选型b" prop="optionb">
          <el-input v-model="ruleForm.optionb"></el-input>
        </el-form-item>
        <el-form-item label="选项A所对人格" prop="ansera">
          <el-select v-model="ruleForm.ansera" placeholder="请选择人格">
            <el-option label="I" value="I"></el-option>
            <el-option label="N" value="N"></el-option>
            <el-option label="E" value="E"></el-option>
            <el-option label="S" value="S"></el-option>
            <el-option label="F" value="F"></el-option>
            <el-option label="J" value="J"></el-option>
            <el-option label="P" value="P"></el-option>
            <el-option label="T" value="T"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选项B所对人格" prop="anserb">
          <el-select v-model="ruleForm.anserb" placeholder="请选择人格">
            <el-option label="I" value="I"></el-option>
            <el-option label="N" value="N"></el-option>
            <el-option label="E" value="E"></el-option>
            <el-option label="S" value="S"></el-option>
            <el-option label="F" value="F"></el-option>
            <el-option label="J" value="J"></el-option>
            <el-option label="P" value="P"></el-option>
            <el-option label="T" value="T"></el-option>
          </el-select>
        </el-form-item>
        
        <div class="subBox">
          <el-button type="primary" @click="submitForm('ruleForm',false)">保存</el-button>
          <el-button 
            v-if="this.optType === 'add'" 
            type="primary" 
            @click="submitForm('ruleForm',true)">保存并继续添加题目
          </el-button>
          <el-button @click="() => this.$router.push('/question')">返回</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">

import { addQuestion, findQuestionById, updateQuestion } from '@/api/question'
import router from '@/router'
export default {
  data() {
    return {
      optType: '', // 当前操作类型
      ruleForm: {
        description: '',
        optiona: '',
        ansera: '',
        optionb: '',
        anserb: ''
      },
      rules: {
        description: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        optiona: [
          { required: true, message: '请输入选项', trigger: 'blur' },
        ],
        optionb: [
          { required: true, message: '请输入选项', trigger: 'blur' },
        ],
        ansera: [
          { required: true, message: '请选择人格', trigger: 'blur' },
        ],
        anserb: [
          { required: true, message: '请选择人格', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    // 获得路由参数
    this.optType = this.$route.query.id ? 'update' : 'add'; 
    if (this.optType === 'update') {
      // 修改操作
      const id = this.$route.query.id;
      if (id) {
        findQuestionById(id).then(res => {
          if (res.data.code === 1) {
            this.ruleForm = res.data.data;
          } else {
            this.$message.error(res.data.message);
            this.$router.push('/question');
          }
        }).catch(error => {
          console.error('获取题目信息失败:', error);
          this.$message.error('获取题目信息失败，请重试');
          this.$router.push('/question');
        });
      } else {
        this.$message.error('缺少题目ID');
        this.$router.push('/question');
      }
    }
  },
  methods: {
    submitForm(formName, isContinue) {
      // 进行表单校验
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表单校验通过，发axios请求
          if (this.optType === 'add') {
            addQuestion(this.ruleForm).then(res => {
              if (res.data.code === 1) {
                this.$message.success('题目添加成功!');
                if (isContinue === true) {
                  this.ruleForm={
                    description: '',
                    optiona: '',
                    ansera: '',
                    optionb: '',
                    anserb: ''
                  }
                } else {
                  this.$router.push('/question');
                }
              } else {
                this.$message.error(res.data.message);
              }
            }).catch(error => {
              console.error('添加题目失败:', error);
              this.$message.error('添加题目失败，请重试');
            });
          } else {
            // 修改操作
            updateQuestion(this.ruleForm).then(res => {
              if (res.data.code === 1) {
                this.$message.success('题目修改成功!');
                this.$router.push('/question');
              } else {
                this.$message.error(res.data.message);
              }
            }).catch(error => {
              console.error('更新题目失败:', error);
              this.$message.error('更新题目失败，请重试');
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.addBrand {
  &-container {
    margin: 30px;
    margin-top: 30px;
    .HeadLable {
      background-color: transparent;
      margin-bottom: 0px;
      padding-left: 0px;
    }
    .container {
      position: relative;
      z-index: 1;
      background: #fff;
      padding: 30px;
      border-radius: 4px;
      // min-height: 500px;
      .subBox {
        padding-top: 30px;
        text-align: center;
        border-top: solid 1px $gray-5;
      }
    }
    .idNumber {
      margin-bottom: 39px;
    }

    .el-form-item {
      margin-bottom: 29px;
    }
    .el-input {
      width: 293px;
    }
  }
}
</style>